<template>
  <div class="head">
    <div class="container head-content">
      <div class="title">
        <img class="number-img" src="../../../assets/images/number-img.png" alt @click="GoHome">
      </div>
      <div v-if="$route.path=='/cart'" class="step">
        <el-steps :active="1" finish-status="success">
          <el-step title="1.我的购物车" />
          <el-step title="2.确认订单信息" />
          <el-step title="3.提交订单" />
          <el-step title="4.完成支付" />
        </el-steps>
      </div>
      <div v-else class="head-information public">
        <div class="search-information" @click="GoSearch">
          <input type="text">
          <div class="search">搜索</div>
        </div>
        <div class="number-cart" @click="GoCart">
          <i class="iconfont icon-cart" />
          <div class="txt">我的购物车</div>
          <i class="iconfont icon-triangle" />
          <div class="rectangle">2</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Header',
  data() {
    return {
      active: 1
    }
  },
  watch: {
    $route() {
      console.log(this.$route.path)
    }
  },
  methods: {
    GoHome() {
      this.$router.push({
        path: '/'
      })
    },
    GoSearch() {
      this.$router.push({
        path: '/search'
      })
    },
    GoCart() {
      this.$router.push({
        path: '/cart'
      })
    }
  }
}
</script>
<style scoped lang="scss">
@import "@/assets/style/common-color.scss";
.head {
  .head-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 77px;
    padding-top: 6px;
    // line-height: 77px;
    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      .number-img {
        width: 151px;
        height: 35px;
        object-fit: cover;
        cursor: pointer;
      }
    }
.title:hover{
      cursor: pointer;
    }
    .public {
      display: flex;
      justify-content: center;
      align-items: center;
      .search-information {
        margin-right: 27px;
        width: 204px;
        height: 32px;
        color: #3d3d3d;

        display: flex;
        justify-content: center;
        align-items: center;
        input {
          border: none;
          outline: none;
          border: 1px solid rgba(223, 223, 223, 1);
          width: 147px;
          height: 100%;
          border-right: none;
        }
        .search {
          flex: 1;
          height: 100%;
          background: #f7f7f7;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .number-cart {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 162px;
        height: 32px;
        font-size: 13px;
        background-color: #f9f9f9;
        border: 1px solid rgba(223, 223, 223, 1);
        opacity: 1;
        padding: 0 10px;
        position: relative;
        .icon-cart {
          font-size: 22px;
          display: block;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        // .icon-cart:before {
        //   width: 22px;
        //   height: 22px;

        // }
        .rectangle {
          width: 23px;
          height: 17px;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          border: 2px #ff3b30 solid;
          background-color: #ff3b30;
          position: absolute;
          border-radius: 5px;
          left: 106px;
          top: -11px;
        }

        .rectangle:before {
          width: 0;
          height: 0px;
          border-radius: 3px;
          border-top: solid 6px transparent;
          border-right: solid 6px #ff3b30;
          border-bottom: solid 6px transparent;
          //   background-color: #FF3B30;
          transform: rotate(45deg);
          position: absolute;
          top: 8px;
          left: 38%;
          content: "";
        }

        .triangle {
          border-style: solid;
          border-width: 5px 7px 7px 7px;
          border-color: transparent transparent #666666 transparent;
          width: 0px;
          height: 0px;
        }
      }
    }
    .step {

      ::v-deep .el-step__title {
        width: 105px;
        font-size: 12px;
      }
      ::v-deep .el-step__line {
        height: 4px;
      }
      ::v-deep .el-step__line-inner {
        border-width: 2px !important;
      }
      ::v-deep .el-step__head{

      }
    }
  }
}
</style>
